<!-- 层叠性：计算权重
层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！

CSS像艺术家一样优雅，像工程师一样严谨。

我们来看一个例子，就知道什么叫层叠性了。 -->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* 第一个li为红色，剩下的li全部为蓝色, 但是这么写无法实现，无法实现的原因很简单，计算一下三个选择器的权重就清楚了，显然第二个样式被第一个样式表覆盖了。 */
      /* .hezi1 ul li{
        color: blue;
      }

      .teshu {
        color: red;
      } */

      /* 正确做法 */
      .hezi1 ul li{
        color: blue;
      }
      .hezi1 ul li.teshu {
        color: red;
      }

    </style>
</head>
<body>
    <div class="hezi1">
        <ul>
            <li class="teshu">文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
        </ul>
    </div>
</body>
</html>